<template>
    <view class="content">
        <image src="../../static/image/info.jpg" class="info-bg"></image>
        <u-navbar title="编辑" :background="background" title-size="32" :border-bottom="false" :immersive="true" :is-back="true" title-color="#000" title-width="300"></u-navbar>
        
        <view :style="{paddingTop: statusBar + 85 + 'px'}">
            <view class="wrapper">
                <!-- <image src="../../static/icon/avatar.png" class="avatar"></image> -->
				<button class="avatar-wrapper" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
				    <image class="avatar" :src="imgUrl" v-if="!avatarUrl"></image>
				    <image class="avatar" :src="avatarUrl"></image>
				</button>
				
                <view class="box">
                    <view class="title">用户名</view>
                    <input type="nickname" v-model="name" maxlength="16" placeholder="请输入" class="inp" @blur="blur">
                    <view class="title">手机号</view>
                    <view class="u-flex">
						<input type="number" v-model="phone" placeholder="请获取手机号" class="inp u-flex-1" disabled>
						<button open-type="getPhoneNumber" @getphonenumber="getPhoneNumber" class="btn1">修改手机号码</button>
					</view>
                </view>
            </view>
            <view class="btn" @click="doSubmit">确认</view>
        </view>
    </view>
</template>

<script>
	const defaultAvatarUrl = '../../static/icon/avatar.png'
	import { API_URL } from '@/static/js/common.js';
    export default {
        data() {
            return {
                statusBar: 0,
                background: { backgroundColor: 'rgba(255,255,255,0)' },
				name: '',
				phone: '',
				URL: API_URL, //上传图片用的
				imgUrl: defaultAvatarUrl,
				avatarUrl: '',
				image_id: '',
            };
        },
        onLoad() {
            let _this = this;
            //状态栏高度
            uni.getSystemInfo({
            	success: function(res) {
            		_this.statusBar = res.statusBarHeight;
            	}
            });
			this.getInfo()
        },
        methods: {
			doSubmit() {
				if (!this.avatarUrl) {
				    this.$toast('请上传头像！');
				    return
				}
				if (!this.name) {
				    this.$toast('请输入姓名！');
				    return
				}
				if(!this.phone){
					this.$toast('手机号不能为空')
					return
				}
				
				this.$ajax('update_user_detail', {
					user_token: this.$getSync('userToken'),
					user_name: this.name,//订单id
					image_id: this.image_id,
					phone: this.phone,
				}).then(ret => {
					if (ret.success == 1000) {
						this.$toast('提交成功')
						setTimeout(() => {
							this.$backT()
						},500)
					} else {
						this.$toast(ret.msg);
					}
				});
			},
			
			// 修改昵称
			blur(e) {
			    console.log(e)
			    this.name = e.detail.value
			},
			
			// 修改头像
			onChooseAvatar(e) {
			    console.log(e)
				uni.uploadFile({
				    url: this.URL + 'api/upload_image', //仅为示例，并非真实接口地址。
					filePath: e.detail.avatarUrl,
				    name: 'image',
				    success: result => {
				        console.log(result)
				        let data = JSON.parse(result.data).detail; //后台返回的路径data.attach_uri
				        this.avatarUrl = data.image
						this.image_id = data.image_id
				    }
				});
			},
			
			// 获取手机号
			getPhoneNumber(data) {
				const _this = this;
				uni.login({
					provider: 'weixin',
					success(res) {
						console.log(res)
						if (res.code) {
							_this.$ajax('weixin_mobile', {
								encryptedData: data.detail.encryptedData,
								iv: data.detail.iv,
								code:res.code,
								user_token:_this.$getSync('userToken'),
							}).then(ret => {
								if (ret.success == 1000) {
			                        uni.setStorageSync('MOBILE', ret.detail.phone);
									_this.phone = ret.detail.phone
								} else {
									_this.$toast(ret.message);
								}
							})
						}
					},
				})
			},
			
			getInfo() {
			    this.$ajax('user_detail', {
			        user_token: this.$getSync('userToken'),
			    }).then(ret => {
			        if (ret.success == 1000) {
						this.name = ret.detail.user_name
						this.avatarUrl = ret.detail.image
						this.image_id = ret.detail.image_id
						this.phone = ret.detail.phone
			        } else {
			            this.$toast(ret.msg);
			        }
			    });
			},
            
            onPageScroll: function(e) {
            	//nvue暂不支持滚动监听，可用bindingx代替
            	// console.log("滚动距离为：" + e.scrollTop);
            	let a = e.scrollTop * 0.05;
            	if (a > 1) {
            		a = 1;
            	}
            	if (e.scrollTop == 0) {
            		this.background.backgroundColor = 'rgba(255,255,255,0)';
            	} else {
            		this.background.backgroundColor = 'rgba(255,255,255,' + a + ')';
            	}
            },
        }
    };
</script>

<style lang="scss">
    page{
        background-color: #fff;
    }
    .info-bg{
        width: 750rpx;
        height: 500rpx;
        position: absolute;
        top: 0;
        left: 0;
        z-index: -1;
    }
    
    .wrapper{
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
	.avatar-wrapper {
	    width: 160rpx;
	    height: 160rpx;
	    margin: 0;
	    padding: 0;
	    background-color: rgba(0,0,0,0) !important;
	    // position: relative;
		border: 2rpx solid #fff;
		border-radius: 50%;
		margin-bottom: -55rpx;
	    
	    &:after {
	        border: none;
	    }
	}
    .avatar{
        width: 160rpx;
        height: 160rpx;
        
    }
    .box{
        width: 100%;
        background-color: #fff;
        border-radius: 30rpx 30rpx 0 0 ;
        padding: 125rpx 50rpx 90rpx;
        font-size: 30rpx;
    }
    .title{
        padding-bottom: 15rpx;
    }
    .inp{
        width: 100%;
        height: 90rpx;
        padding: 0 30rpx;
        background-color: #fbfbfd;
        border: 2rpx solid #efefef;
        border-radius: 20rpx;
        margin-bottom: 30rpx;
        color: #5a6c92;
    }
	.huoqu{
		padding: 22rpx;
		background-color: #d4d4d4;
		border-radius: 20rpx;
		margin-left: 20rpx;
		margin-bottom: 30rpx;
	}
	.btn1{
	    font-size: 26rpx;
	    margin-left: 15rpx;
	    background-color: #f5f5f5;
	    border-radius: 20rpx;
		padding: 15rpx;
		margin-bottom: 30rpx;
	}
	.btn1::after {
	    border: none;
	}
    .btn{
        font-size: 34rpx;
        color: #fff;
        text-align: center;
        padding: 25rpx;
        background-color: #00457f;
        border-radius: 50rpx;
        margin: 0 50rpx;
    }
    
    

</style>
